<template>
  <div>
    <h1>活动评价管理</h1>
    <a-table :dataSource="reviews" rowKey="id">
      <a-table-column title="用户ID" key="userId" :customRender="renderUserId"></a-table-column>
      <a-table-column title="活动名称" key="activityName" :customRender="renderActivityName"></a-table-column>
      <a-table-column title="评价内容" dataIndex="reviewContent" key="reviewContent"></a-table-column>

    </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useActivityReviewStore } from '@/stores/activityReview';
import { Table as aTable } from 'ant-design-vue';

const activityReviewStore = useActivityReviewStore();
const reviews = ref([]);
// const userId = ref([]);

onMounted(() => {
  activityReviewStore.fetchReviews().then(data => {
    reviews.value = data;
  });
});

const renderUserId = ({ text }) => text.userId.userId;
const renderActivityName = ({ text }) => text.activity.name;



</script>

<!--<style scoped>-->
<!--table {-->
<!--  width: 100%;-->
<!--  border-collapse: collapse;-->
<!--}-->
<!--th, td {-->
<!--  border: 1px solid black;-->
<!--  padding: 8px;-->
<!--  text-align: left;-->
<!--}-->


<!--</style>-->
